<template>
	<div class="achievement-main">	
		<section class="section-item">	
			<dy-select></dy-select>
		</section>
		<section class="section-item" v-if="achievementData">
			<div class="title">本月业绩达成 <div class="time fr"></div></div>
			<div class="cc">
				<div :class="[{'on' : nowTitle.quotaType == 1}, 'item-part']" @click="chooseType({quotaType:1, name:'新增授信'})">			
					<p class="text cc">
						<span class="text-left">
							<span class="text-name">新增授信</span>
							<span class="text-num">{{numFormat(achievementData.creditAmount)}}</span>
						</span>
						<span v-if="achievementData.creditDiff > 0" class="text-right text-up">
							<span  class="text-name">超额</span>							
							<span class="text-num"><i class="icon icon-shangsheng"></i>{{numFormat(achievementData.creditDiff)}} </span>
						</span>
						<span v-else class="text-right text-down">
							<span class="text-name">差额</span>
							<span class="text-num"><i class="icon icon-xiajiang"></i>{{numFormat(Math.abs(achievementData.creditDiff))}}</span>
						</span>
					</p>
					<chart :options="gauge1" theme="roma"></chart>	
					<p class="target">进度目标 {{numFormat(achievementData.creditScheduleTarget)}}</p>
					<p class="mon-target">月度目标 {{numFormat(achievementData.creditMonthTarget)}}</p>
					<div class="gauge-name">年度完成 {{numFormat(achievementData.creditYearTotal)}}</div>
				</div>
				<div :class="[{'on' : nowTitle.quotaType == 2}, 'item-part']" @click="chooseType({quotaType:2, name:'在库净增'})">
					<p class="text cc">
						<span class="text-left">
							<span class="text-name">在库净增</span>
							<span class="text-num">{{numFormat(achievementData.loanStorage)}}</span>
						</span> 
						<span v-if="achievementData.loanDiff > 0" class="text-right text-up">
							<span  class="text-name">超额</span>							
							<span class="text-num"> <i class="icon icon-shangsheng"></i>{{numFormat(achievementData.loanDiff)}}</span>
						</span>
						<span v-else class="text-right text-down">
							<span class="text-name">差额 </span> 
							<span class="text-num"><i class="icon icon-xiajiang"></i>{{numFormat(Math.abs(achievementData.loanDiff))}}</span>
						</span>
					</p>
					<chart :options="gauge2" theme="roma"></chart>	
					<p class="target">进度目标 {{numFormat(achievementData.loanScheduleTarget)}}</p>
					<p class="mon-target">月度目标 {{numFormat(achievementData.loanMonthTarget)}}</p>		
					<p></p>
					<div class="gauge-name">年度完成 {{numFormat(achievementData.loanYearTotal)}}</div>
				</div>
			</div>
		</section>
		<section class="section-item">	
			<p class="title" v-if="partIndex == 1"> {{ nowTitle.quotaType == 1 ? '新增授信与授信目标' : '在库净增与在库目标'}}对比{{tagIndex == 1 ? "日" : "月"}}趋势</p>
			<p class="title" v-else>在库净增与目标对比{{tagIndex == 1 ? "日" : "月"}}趋势</p>
			<div class="block-tag cc">
				<div :class="[{'on': tagIndex == 1}, 'tag']" @click="chooseTag(1)">近30天</div>
				<div :class="[{'on': tagIndex == 2}, 'tag']" @click="chooseTag(2)">近12月</div>
			</div>
			<p class="tip">业绩达成{{tagIndex == 1 ? '天数' : '月份'}}占比：{{upStandardRatio}}</p>
			<chart :options="line1" theme="roma" class='line-charts'></chart>	
		</section>
		<section class="section-item">
			<div class="title" v-if="Object.keys(lineDetail).length">
				{{nowTitle.name}}业绩分析 
				<router-link v-if="nowTitle.quotaType == 1" class="fr" to='/loans/credit'>授信详情 &gt;&gt;</router-link>
				<router-link v-if="nowTitle.quotaType == 2" class="fr" to='/loans/storage'>在库详情 &gt;&gt;</router-link>
			</div>
			<dy-line opt="achievementDetail"></dy-line>	
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge, Event, numFormat} from '@/utils/index'
export default {
	name: 'loans',
    data () {	 
		return {	
			numFormat: numFormat,
			partIndex: 1,
			tagIndex: 1,
			achievementData: {},
			upStandardRatio: '',
			trendPost: {
				period: 1,
				quotaType: 1,
			},
			gauge1: {},
			gauge2: {},
			line1: {},
		}
	},
	computed: {
		orgId () {
			return this.$store.getters.orgId
		},
		lineDetail () {
			return this.$store.getters.lineDetail
		},
		nowTitle () {
			return this.$store.getters.nowTitle
		}
	},
	watch : {
		orgId ()  {
			this.updata()	
		},
		nowTitle () {	
			this.getAchievementTrend()
		}
	},	
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  		
		this.$store.commit('nowTitle', {quotaType:1, name:'新增授信'}) 
	},
    methods: {
    	// 更新数据
    	updata () {  
    		this.getAchievementMajor()
    		this.getAchievementTrend()	
    	},    	
    	// 改变新增授信  或者 在库净增
    	chooseType(nowTitle) {
    		this.$store.commit('nowTitle', nowTitle) 
    	},    
    	// 切换 近30天 近12月
    	chooseTag (index) {
    		this.tagIndex = index;
    		this.getAchievementTrend();
    	},    	
    	// 仪盘表
    	getAchievementMajor () {
    		if(!this.orgId) return

    		api.achievementMajor({orgId: this.orgId}).then(data => {   
    			let gauge1 = {series : [ 
    				{
    					max: 150,
    					axisLine: {           
    						lineStyle: {      
    							color: [[0.8, '#e9666f'], [0.99, '#ffda69'], [1, '#5fda73']]
    						}  
    					},   
    					data : [{ name: '', value: parseFloat(data.creditCompleteRatio)}]
    				}
    			]}
    			let gauge2 = {series : [ 
    				{
    					max: 150,
    					axisLine: {           
    						lineStyle: {      
    							color: [[0.8, '#e9666f'], [0.99, '#ffda69'], [1, '#5fda73']]
    						}  
    					},   
    					data : [{ name: '', value: parseFloat(data.loanCompleteRatio)}]
    				}
    			]}
				this.gauge1 = merge(this.gauge, gauge1)
				this.gauge2 = merge(this.gauge, gauge2)

    			this.achievementData = data;
			}) 
    	},  
    	// 趋势报表
    	getAchievementTrend () {   
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}

    		api.achievementTrend(this.trendPost).then(data => {     
				this.upStandardRatio = data.upStandardRatio;
    			let line1 = {	
    				legend: {data:[]},		
					xAxis :  [{data : data.reportDetail[0].xValueList}],
					series: []
				}

				// 有百分率的情况
				if(data.reportDetail[0].yValueList[0].match("%")) {
					line1.yAxis =[
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]
				}

				data.reportDetail.map((res, index) => {
					let _data = ''
					// 有百分率的情况
					if(res.yValueList[0].match('%')) {
						_data = []
						res.yValueList.map((r, i) => {
							_data.push(r.replace('%', ''))
						}) 
					} 

					line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName}) 
					line1.legend.data.push(res.quotaTypeName) 
				})	
    			this.line1 = merge(this.line, line1)
			}) 
    	},  
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.achievement-main {
	.item-part {
		padding: .6rem 0 .8rem;
		line-height: 1rem;
		text-align: center;

		&.on {
			background-color: @on-bg;
		}

		.target {
			margin-top: -1rem;
		}
	}

	.line-des {
		padding: .4rem 0 .4rem;
		text-align: center;
	}

	.text {
		color: @h1-color;
		width: 80%;
		margin: 0 auto;	

		.text-name {
			display: block;
			color: #333
		}
		.text-num {
			display: block;
			font-size: .6rem;
			i {
				font-size: .6rem;
				margin-top: -.1rem;
			}
		}
	}
	.tip {
		line-height: 1.4rem;
		text-align: center;
		color: #999;
	}
	.text-left {
		float: left;
		text-align: left;
	}
	.text-right {
		text-align: right;
		float: right;

		&.text-up {
			color: @up;
		}
		&.text-down {
			color: @down;
		}
	}

	.section-item {
		&:nth-child(1) {
			margin-bottom: 0;
		}
	}

	.mon-target {
		margin-bottom: .5rem;
	}

	.gauge-name{
		color: #666;
		margin-top: 0;
	}

	.item-part .target{
		margin-top: -1.5rem;
	}
}
</style>